<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item :to="{ name: 'PersonalOrderList' }"
            >个人订单</el-breadcrumb-item
          >
          <el-breadcrumb-item>订单详情</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="payment_order_content">
        <div class="payment_order_top_box">
          <!-- 订单信息 -->
          <el-row type="flex" justify="space-between">
            <el-col :span="6">
              <div class="payment_order_title_box">
                <div class="payment_order_title_box_item">
                  <div class="payment_order_title_box_item_b">订单编号：</div>
                  <div class="payment_order_title_box_item_m">
                    {{ orderData.order_number }}
                  </div>
                </div>
                <div class="payment_order_title_box_item">
                  <div class="payment_order_title_box_item_b">创建时间：</div>
                  <div class="payment_order_title_box_item_m">
                    {{ orderData.order_time }}
                  </div>
                </div>
                <div class="payment_order_title_box_item">
                  <div class="payment_order_title_box_item_b">推荐机构：</div>
                  <div class="payment_order_title_box_item_m">
                    {{ orderData.oguser_name }}
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div
                class="payment_order_status_box"
                v-if="orderData.order_status == 2"
              >
                <i class="el-icon-success"></i>
                <div class="payment_order_status_words">已支付</div>
              </div>
              <div
                class="payment_order_status_box"
                v-if="orderData.order_status == 1"
              >
                <i class="el-icon-remove"></i>
                <div class="payment_order_status_words_o">待支付</div>
                <el-button
                  size="mini"
                  type="primary"
                  style="margin-top: 10px"
                  @click="createImgFn(orderData.order_number)"
                >
                  下载付款凭证
                </el-button>
              </div>
              <div
                class="payment_order_status_box"
                v-if="orderData.order_status == 6"
              >
                <i class="el-icon-remove"></i>
                <div class="payment_order_status_words_o">已退款</div>
              </div>
              <div
                class="payment_order_status_box"
                v-if="orderData.order_status == 7"
              >
                <i class="el-icon-remove"></i>
                <div class="payment_order_status_words_o">退款中</div>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="24">
              <el-table
                :data="enrollData"
                border
                style="width: 100%"
                size="mini"
              >
                <el-table-column
                  prop="exam_level"
                  label="考试项目级别"
                  width="200"
                  align="center"
                  :formatter="formatterLevelFn"
                >
                </el-table-column>
                <el-table-column
                  prop="title"
                  label="考试项目"
                  align="center"
                ></el-table-column>

                <el-table-column
                  prop="area_name"
                  label="考点"
                  width="160"
                  align="center"
                ></el-table-column>

                <el-table-column
                  prop="address"
                  label="考场地址"
                  align="center"
                ></el-table-column>

                <el-table-column
                  prop="exam_date"
                  label="考试时间"
                  width="160"
                  align="center"
                ></el-table-column>

                <el-table-column label="考试费用" width="110" align="center">
                  <template slot-scope="scope">
                    <div>{{ scope.row.exam_money }}</div>
                  </template>
                </el-table-column>

                <el-table-column label="考试人数" width="90" align="center">
                  <template>
                    <div
                      v-if="
                        orderData.students != null &&
                        orderData.students != '' &&
                        orderData.students != undefined
                      "
                    >
                      {{ orderData.students.length }}
                    </div>
                    <div v-else>0</div>
                  </template>
                </el-table-column>

                <el-table-column
                  label="考试费用总计"
                  width="160"
                  align="center"
                >
                  <template>
                    <div>{{ orderData.exam_money }}</div>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
        <!-- 报名信息 -->
        <el-row
          type="flex"
          style="padding: 30px 16px 0px"
          justify="space-between"
        >
          <el-col :span="6">
            <div class="payment_order_title" style="margin-bottom: 6px">
              报名信息
            </div>
          </el-col>
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-download"
            style="margin-bottom: 10px"
            @click="downloadAllFn()"
            v-if="orderData.order_status == 2"
          >
            下载全部准考证
          </el-button>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <el-table
              :data="examineeList"
              border
              style="width: 100%"
              size="mini"
              v-if="enrollData[0]"
            >
              <el-table-column
                type="index"
                label="序号"
                width="50"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="考生名称"
                width="150"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="identity_number"
                label="身份证号"
                width="220"
                align="center"
              ></el-table-column>

              <el-table-column label="考试项目" align="center">
                <template>
                  <div>{{ enrollData[0].title }}</div>
                </template>
              </el-table-column>

              <el-table-column label="考试日期" align="center" width="250">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.exam_date + " " + scope.row.exam_start_time }}
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                prop="exam_stu_number"
                label="准考证号"
                width="220"
                align="center"
                v-if="orderData.order_status == 2"
              ></el-table-column>

              <el-table-column
                prop="height"
                label="身高"
                width="100"
                align="center"
              ></el-table-column>

              <el-table-column
                label="操作"
                width="200"
                itemprop=""
                align="center"
                v-if="orderData.order_status == 2"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-download"
                    class="examinee_edit_btn"
                    @click="downloadFn(scope.$index, scope.row)"
                    >下载准考证</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="24">
            <div class="payment_order_pagination">
              <el-pagination
                @size-change="listSizeChange"
                @current-change="listCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-row>
    <!-- 底部提交 -->
    <div class="payment_order_bottom">
      <el-button
        type="danger"
        size="mini"
        icon="iconfont icon-w_fanhui"
        v-if="orderWay == 1"
        @click="toHome()"
        >返回首页</el-button
      >
      <el-button
        type="danger"
        size="mini"
        icon="iconfont icon-w_fanhui"
        v-else
        @click="backBtn()"
        >返回上一页</el-button
      >
    </div>
  </div>
</template>
<style src="../../assets/css/order/personalOrderDetail.css" scoped></style>

<script>
import html2canvas from "html2canvas";

export default {
  name: "PersonalOrderDetail",
  components: {},
  data() {
    return {
      userName: this.$store.state.loginUserName,
      baseAPIUrl: this.$store.state.baseAPIUrl,
      orderId: "", // 当前订单id
      orderWay: "", // 来源
      enrollData: [], // 考试活动信息
      orderData: {
        order_number: "",
        exam_money: "",
        stu_count: "",
        order_time: "",
      }, // 订单信息
      examineeList: [],
      currentPage: 1, // 当前页
      pageSizes: [10, 20, 50, 100], // 可选页容量
      pageSize: 10, // 当前页容量
      total: 0, // 总条数
      levelList: this.$store.state.levelList, // 等级列表
      loadingKey: false,
      loadingText: "",
    };
  },
  created: function () {
    let orderId = this.$route.params.orderId;
    if (orderId != undefined && orderId != "") {
      this.$store.commit("set_watchOrderId", orderId);
      this.orderId = orderId;
    } else {
      this.orderId = this.$store.state.watchOrderId;
    }

    let orderWay = this.$route.params.way;
    if (orderWay != undefined && orderWay != "") {
      this.$store.commit("set_watchOrderWay", orderWay);
      this.orderWay = orderWay;
    } else {
      this.orderWay = this.$store.state.watchOrderWay;
    }
    this.getOrderDataFn();
  },
  methods: {
    // 查询订单数据
    getOrderDataFn: function () {
      let that = this;
      let url = "/mobile/enrollOrderDetail";
      let data = {
        order_id: this.orderId,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          if (response.code == 0) {
            that.enrollData = [];
            that.enrollData.push(response.exam);
            that.orderData = response.order;
            that.orderData.students = response.students;
            that.getListDataFn();
          } else {
            that.loadingKey = false;
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 查询列表数据
    getListDataFn: function () {
      let that = this;
      let url = "/mobile/enrollOrderStu";
      let data = {
        order_id: this.orderId,
        page: this.currentPage,
        perPage: this.pageSize,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.examineeList = response.students;
            that.total = response.total_count;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 考试等级格式化
    formatterLevelFn: function (row) {
      let exam_level = row.exam_level;
      let text = "";
      this.levelList.forEach(function (item) {
        if (item.key == exam_level) {
          text = item.value;
        }
      });
      return text;
    },
    // 页容量改变
    listSizeChange: function (val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getListDataFn();
    },
    // 当前页改变
    listCurrentChange: function (val) {
      this.currentPage = val;
      this.getListDataFn();
    },
    // 返回首页
    toHome: function () {
      this.$router.push({
        name: "Home",
      });
    },
    // 返回上一页
    backBtn: function () {
      this.$router.go(-1);
    },
    // 下载全体准考证
    downloadAllFn: function () {
      const link = document.createElement("a");
      // 这里是将链接地址url转成blob地址，
      link.setAttribute("href", this.baseAPIUrl + this.orderData.tickets);
      link.setAttribute("target", "_blank");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    // 下载准考证
    downloadFn: function (index, row) {
      const link = document.createElement("a");
      // 这里是将链接地址url转成blob地址，
      fetch(this.baseAPIUrl + row.ticket_image)
        .then((res) => res.blob())
        .then((blob) => {
          link.href = URL.createObjectURL(blob);
          // 下载文件的名称及文件类型后缀
          link.download = row.name + row.exam_stu_number + ".png";
          document.body.appendChild(link);
          link.click();
          // 在资源下载完成后 清除 占用的缓存资源
          window.URL.revokeObjectURL(link.href);
          document.body.removeChild(link);
        });
    },
    // 生成图片
    createImgFn: function (order_number) {
      let orderImgBox = this.$refs.orderImgBox;
      let option = {
        backgroundColor: "#ffffff",
        allowTaint: true,
      };
      html2canvas(orderImgBox, option).then((canvas) => {
        const link = document.createElement("a");
        // 这里是将链接地址url转成blob地址，
        fetch(canvas.toDataURL())
          .then((res) => res.blob())
          .then((blob) => {
            link.href = URL.createObjectURL(blob);
            // 下载文件的名称及文件类型后缀
            link.download = order_number + "付款凭证.png";
            document.body.appendChild(link);
            link.click();
            // 在资源下载完成后 清除 占用的缓存资源
            window.URL.revokeObjectURL(link.href);
            document.body.removeChild(link);
          });
      });
    },
  },
};
</script>
